<template>
  <div id="right-cards">
    <div class="title">机构数据</div>
    <div class="cards">
       <div
      class="card-item"
      v-for="(card, i) in cards"
      :key="card.title"
    >
      <div class="card-title">{{ titles[i] }}</div>
      <div class="card-number">
        <dv-digital-flop :config="card.total" class="card-flop" />
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightCard',
  components: {
  },
  data () {
    return {
      titles: ['机构总数', '省内非扬州', '非江苏省'],
      cards: []
    }
  },
  methods: {
    createData () {
      this.cards = new Array(3).fill(0).map((foo, i) => ({
        total: {
          number: [this.randomExtend(9000, 10000)],
          content: '{nt}',
          textAlign: 'right',
          style: {
            fill: '#00faa9',
            fontWeight: 'bold'
          }
        }
      }))
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
    }
  },
  mounted () {
    this.createData()
    setInterval(this.createData, 30000)
  }
}
</script>

<style lang="less" scoped>
#right-cards {
  width: 100%;
  height: 30%;

  .title {
    font-size: 24px;
    font-weight: bold;
    height: 40px;
    text-align: center;
    margin: 0 0 10px 0;
  }

  .cards {
    display: flex;
    flex-direction: row;
  }

  .card-item {
    width: 33%;
    margin-right: 20px;
    padding: 10px 0;
    border: 1px solid #1484e7;
    border-top: 2px solid rgba(1, 153, 209, .5);
    background-color: rgba(6, 30, 93, 0.5);
  }

  .card-item:last-child {
    margin-right: 0;
  }

  .card-title {
    font-size: 20px;
    font-weight: 550;
    color: #1484e7;
    flex-direction: row;
    height: 30px;
    margin: -5px 0 5px 10px;
  }

  .card-number {
    font-size: 20px;
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 20px;
  }

  .card-flop {
    width: 70%;
    height: 25px;
  }
}
</style>
